<template>
    <div>
      <el-page-header content="添加工作展示" @back="handleBack()" title="工作展示管理" />
      <el-form
        ref="workFormRef"
        :model="workForm"
        :rules="workFormRules"
        label-width="80px"
        class="demo-ruleForm"
  
      >
        <el-form-item label="工作标题" prop="title">
          <el-input v-model="workForm.title" />
        </el-form-item>
  
        <el-form-item label="工作简要描述" prop="introduction">
          <el-input v-model="workForm.introduction" type="textarea" />
        </el-form-item>

        <el-form-item label="工作详细描述" prop="detail">
          <el-input v-model="workForm.detail" type="textarea" />
        </el-form-item>
  
        <el-form-item label="工作图片" prop="cover">
          <Upload :avatar="workForm.cover" @xuhaochange="handleChange" />
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="submitForm()">更新提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive ,onMounted} from "vue";
  import Upload from "@/components/upload/Upload";
  import upload from "@/util/upload"
  // import router from "@/router";
  import {useRouter,useRoute} from "vue-router"
  import axios from "axios"
  
  const workFormRef = ref();
  const workForm = reactive({
    title: "",
    introduction: "",//简要描述
    detail: "",//详细描述
    cover: "",//封面图片
    file: null,
  });
  
  const workFormRules = reactive({
    title: [{ required: true, message: "请添加工作标题", trigger: "blur" }],
    introduction: [{ required: true, message: "请添加工作简要描述", trigger: "blur" }],
    detail: [{ required: true, message: "请添加工作详细描述", trigger: "blur" }],
    cover: [{ required: true, message: "请上传封面", trigger: "blur" }],
  });
  
  
  const handleChange = (file) => {
    workForm.cover = URL.createObjectURL(file);
    workForm.file = file;
  };
  
  const router = useRouter()
  const route = useRoute()
  //更新提交
  const submitForm = ()=>{
    workFormRef.value.validate(async(valid)=>{
              if(valid){
                await upload("/adminapi/work/list",workForm)
                router.push(`/work-manage/worklist`) //路由跳转页面
              }
          })
      }

  const handleBack=()=>{
    router.back()
  }

  //取编辑页面的数据
  onMounted(()=>{
    getData();

  })
  const getData = async() =>{
    const res = await axios.get(`/adminapi/work/list/${route.params.id}`)
    //console.log(res.data.data[0])
    Object.assign(workForm,res.data.data[0])
  }

  </script>
  
  <style scoped lang="scss">
  .demo-ruleForm {
    margin-top: 50px;
  }
  .el-row {
    margin-top: 20px;
    .box-card {
      text-align: center;
    }
  }
  </style>
  